<template>
  <div style="position: relative;">
    <div id="receivables-des">
      <Row type="flex"
           justify="space-between"
           class="coinrevenue-list-edit">
        <Row type="flex"
             align="middle">
          <Col>
          <span class="concrete-data">时间：</span>
          <datePickerYmd @on-change="search"
                         :selectDateType.sync="selectDateType"
                         :dataType="dataType"
                         :dateOption="dateOption"
                         v-model="timeDate"
                         style="display:inline-block"></datePickerYmd>
          </Col>
          <Row type="flex"
               align="middle"
               class="export-btn">
            <Col><span>门店名称：</span></Col>
            <Col>
            <!-- <vueTreeselectShop :shopList.sync="searchObj.shopId"
                               @id-change="search"
                               :width='width'
                               :statusList.sync="statusList"
                               :permissionCode="permissionCode"
                               v-model="testValue"></vueTreeselectShop> -->
            <vueTreeselectChoice :multiple="true"
                                 :z-index="2001"
                                 ref="vueTreeselectChoice"
                                 value-consists-of="LEAF_PRIORITY"
                                 @input="handleShop"
                                 @on-api-finish="apiFinish"
                                 permissionCode="moms:report:receivables"
                                 v-model="ShopValue"></vueTreeselectChoice>
            </Col>
            <Col>
            <Button type="primary"
                    class="coinrevenue-btn export-btn"
                    style="width:80px;"
                    @click="search">查询</Button>
            </Col>
          </Row>
        </Row>
        <Col class="export_receivable"
             v-if="hasPermission('moms:report:receivablesexport')">
        <Dropdown trigger="click"
                  class="coinrevenue-btn export-btn"
                  style="width:100px;margin-right: -20px;"
                  @on-click="DropdownItemn">
          <Button class="check_all"
                  style="width:80px">导出
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list"
                        style="text-align:center">
            <DropdownItem name="1">导出汇总表</DropdownItem>
            <DropdownItem name="2">导出明细表</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        </Col>
      </Row>
      <!-- :load="load"  lazy -->
      <el-table ref="elTable"
                :row-key="rowKey"
                :load="load"
                :max-height="520"
                :row-class-name="tableRowClassName"
                :header-cell-class-name="tableHeaderRowClassName"
                lazy
                :tree-props="{children: 'childList', hasChildren: 'hasChildren'}"
                border
                stripe
                v-loading="loading"
                :data="resData"
                style="width: 100%">
        <el-table-column :fixed="item.fixed"
                         :prop="item.key"
                         :label="item.title"
                         :width="item.width"
                         :align="item.align"
                         v-for="(item, index) in columns"
                         :key="index">
          <template slot-scope="scope">
            {{ item.key !== 'shopName' ? formatAmount(scope.row[item.key]) : scope.row[item.key] }}
          </template>
          <el-table-column :prop="ele.key"
                           :label="ele.title"
                           :width="ele.width"
                           :align="ele.align"
                           v-for="(ele, i) in item.children"
                           :key="i">
            <template slot-scope="scope">
              {{ scope.row[ele.key] | formatAmount }}
            </template>
            <el-table-column :prop="list.key"
                             :label="list.title"
                             :width="list.width"
                             :align="list.align"
                             v-for="(list, j) in ele.children"
                             :key="j">
              <template slot-scope="scope">
                <div @click="clickHandler(scope.row)"
                     v-if="list.key === 'entryFeeIncome'">
                  <span style="color:#2d8cf0;cursor: pointer; textDecoration: underline #2d8cf0;">{{
                    scope.row[list.key] | formatAmount
                    }}</span>
                </div>
                <div v-else>{{ scope.row[list.key] | formatAmount }}</div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <Drawer title="进场费收入明细"
            v-model="value3"
            width="662"
            class-name="slotting-fee"
            :mask-closable="false"
            :styles="styles">
      <Row type="flex"
           justify="end"
           style="padding-bottom:24px;">
        <Col>
        <Button class="check_all"
                @click="goexport"
                v-if="hasPermission('moms:report:receivablesexport')"
                style="width:80px">导出 </Button>
        </Col>
      </Row>
      <div style="border-left: 1px solid #e8eaec;">
        <Table border
               :columns="columns2"
               :loading="isloading"
               :height="this.tableHeight2"
               class="table-list"
               :data="data2">
          <template slot-scope="{ row }"
                    slot="slottingFee">
            <span>{{ formatAmount(row.slottingFee) }}</span>
          </template>
        </Table>
      </div>
      <div class="page-box"
           style="margin-top: 20px">
        <Page :total="total2"
              :current.sync="searchObj2.offset"
              :page-size="searchObj2.limit"
              @on-change="handlePage2"
              @on-page-size-change="handlePageSize2"
              show-sizer
              show-total />
      </div>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 16px;width:72px;"
                @click="value3 = false">取消</Button>
        <Button type="primary"
                style="width:72px;"
                @click="value3 = false">确认</Button>
      </div>
    </Drawer>
    <!-- <div class="page-box" style="margin-top: 20px">
      <Page
        :total="total"
        ref="pages"
        :current.sync="searchObj.offset"
        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        :page-size-opts="$pageSizeOpts"
        show-total
      />
    </div> -->
    <down-center ref="downCenterRef"
                 perms="moms:report:receivables"
                 v-if="hasPermission('moms:report:receivablesexport')"></down-center>
  </div>
</template>
<script>
import '../../report.less'
// import { rowSpanTable, formatRowspanData } from '@/libs/rowspan'
import { formatAmount } from '@/libs/tools'
// import { getShopList } from '@/api/system/store'
import {
  revenueDaily,
  slottingFeeList,
  slottingFeeListExport
} from '@/api/report/finance'
import { blobToXls } from '@/libs/blobToXls'
import DownCenter from '@/view/components/down-center/index.vue'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import { Table, TableColumn } from 'element-ui'
import datePickerYmd from '@/components/date-picker-ymd/date-picker-ymd.vue'
import dayjs from 'dayjs'
import { cloneObj } from '@/libs/cloneObj'
import { Decimal } from 'decimal.js'
// console.log(new Decimal('7,174.70').valueOf())
export default {
  name: 'report_finance_receivables',
  components: { vueTreeselectChoice, datePickerYmd, ElTable: Table, ElTableColumn: TableColumn, DownCenter },
  data () {
    return {
      treeselectoptions: [], // 返回的所有门店
      loading: false,
      isloading: false,
      dataChoose: 'day',
      shopName: null,
      permissionCode: 'moms:report:receivables',
      width: 180,
      selectShopId: [],
      dataType: [
        { key: 'date', value: '日' },
        { key: 'month', value: '月' },
        { key: 'year', value: '年' }
      ],
      selectDateType: 'date',
      ShopValue: [],
      statusList: false,
      timeDate: [
        dayjs()
          .subtract(1, 'day')
          .format('YYYY-MM-DD 00:00:00'),
        dayjs(new Date()).format('YYYY-MM-DD 00:00:00')
      ],
      value3: false,
      styles: {
        height: 'calc(100% - 68px)',
        overflow: 'auto',
        paddingBottom: '68px',
        paddingTop: '23px',
        paddingLeft: '24px',
        paddingRight: '24px',
        position: 'static'
      },
      total2: 0,
      searchObj2: {
        shopIds: null,
        shopName: null,
        offset: 1,
        limit: 10
      },
      testValue: [],
      value: null,
      filterData: [],
      shopList: [],
      dateOption: {
        disabledDate: date => {
          if (process.env.NODE_BUILD === 'prod') return dayjs(date).isAfter(dayjs(new Date()).subtract(1, 'day'))
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      },
      ids: [],
      tableHeight: 0,
      tableHeight2: 0,
      formatAmount: formatAmount,
      total: 0,
      optionsStartTimeDay: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      searchObj: {
        shopId: [],
        offset: 1,
        limit: 10
      },
      resData: [],
      columns2: [
        { title: '门店', key: 'shopName', align: 'center', width: 200 },
        { title: '日期', key: 'date', align: 'center', width: 100 },
        { title: '商户名称', key: 'rentMerchantName', align: 'center', width: 200 },
        { title: '进场费(元)', slot: 'slottingFee', align: 'center' }
      ],
      data2: [],
      columns: [
        { title: '门店', key: 'shopName', align: 'center', width: 300 },
        { title: '营收合计(元)', key: 'totalAmount', align: 'center', width: 200, slot: 'totalAmount' },
        { title: '现金(元)', key: 'cash', align: 'center', width: 150, slot: 'cash' },
        { title: '银联POS(元)', key: 'union', align: 'center', width: 150, slot: 'union' },
        { title: '微信(元)', key: 'weixin', align: 'center', width: 150, slot: 'weixin' },
        { title: '支付宝(元)', key: 'aliPay', align: 'center', width: 150, slot: 'aliPay' },
        { title: '对公转账(元)', key: 'transferAccount', align: 'center', width: 150, slot: 'transferAccount' },
        { title: '聚合收款(元)', key: 'cmb', align: 'center', width: 150, slot: 'cmb' },
        { title: '收款合计(元)', key: 'totalReceivables', align: 'center', width: 150, slot: 'totalReceivables' },
        { title: '冲应收(元)', key: 'rushToCollect', align: 'center', width: 150, slot: 'rushToCollect' },
        {
          title: '营收小计(元)',
          align: 'center',
          children: [
            {
              title: '主营业务营收小计(元)',
              align: 'center',
              children: [
                {
                  title: '游戏币营收(元)',
                  key: 'gameCurrencyRevenue',
                  align: 'center',
                  width: 150
                },
                {
                  title: '休闲项目营收(元)',
                  key: 'recreationRevenue',
                  align: 'center',
                  width: 150
                },
                {
                  title: '商品销售营收(元)',
                  key: 'salesRevenue',
                  align: 'center',
                  width: 150
                },
                {
                  title: '游戏卡营收(元)',
                  key: 'gameCardRevenue',
                  align: 'center',
                  width: 150
                },
                {
                  title: '微信机台营收(元)',
                  key: 'microphoneRevenue',
                  align: 'center',
                  width: 150
                },
                {
                  title: '包场活动营收(元)',
                  key: 'revenueFromBaochang',
                  align: 'center',
                  width: 150
                },
                {
                  title: '游戏券营收(元)',
                  key: 'gameTicketRevenue',
                  align: 'center',
                  width: 150
                }
              ]
            },
            {
              title: '其他业务营收小计(元)',
              align: 'center',
              children: [
                {
                  title: '储物柜出租收入(元)',
                  key: 'rentalIncome',
                  align: 'center',
                  width: 150
                },
                {
                  title: '废品收入(元)',
                  key: 'wasteIncome',
                  align: 'center',
                  width: 150
                },
                {
                  title: '进场费收入(元)',
                  key: 'entryFeeIncome',
                  align: 'center',
                  width: 150
                }
              ]
            }
          ]
        },
        {
          title: '营业外小计(元)',
          align: 'center',
          children: [
            {
              title: '长款收入(元)',
              key: 'longincome',
              align: 'center',
              width: 150
            },
            {
              title: '赔偿款收入(元)',
              key: 'compensationIncome',
              align: 'center',
              width: 150
            }
          ]
        },
        {
          title: '今日另收小计(元)',
          align: 'center',
          children: [
            {
              title: '小商铺押金(元)',
              key: 'smallShopDeposit',
              align: 'center',
              width: 150
            },
            {
              title: '小商铺租金(元)',
              key: 'smallShopRent',
              align: 'center',
              width: 150
            },
            {
              title: '机台租赁押金(元)',
              key: 'machineRentalDeposit',
              align: 'center',
              width: 150
            },
            {
              title: '机台租赁租金(元)',
              key: 'machineRent',
              align: 'center',
              width: 150
            },
            {
              title: '非会员押金(元)',
              key: 'nonMemberCardDeposit',
              align: 'center',
              width: 150
            },
            {
              title: '新项目收款(元)',
              key: 'cashCardReceipt',
              align: 'center',
              width: 150
            },
            {
              title: '团购收款(元)',
              key: 'groupBuyingReceipts',
              align: 'center',
              width: 150
            }
          ]
        }
      ]
    }
  },
  computed: {
    startDate () {
      return this.timeDate[0]
    },
    endDate () {
      return this.timeDate[1]
    }
  },
  watch: {
    // 'searchObj.shopId': {
    //   handler: function (val, newval) {
    //     this.selectShopId = []
    //     this.filterSeleterList(val, this.shopList)
    //   },
    //   deep: true
    // }
  },
  mounted () {
  },
  updated () {
    // this.$nextTick(() => {
    //   rowSpanTable(this.$refs.rowSpanTable, 'shopName', 'left')
    // })
  },
  methods: {
    goexport () {
      slottingFeeListExport({
        merchantId: this.$store.state.user.merchantId,
        shopIds: [this.searchObj2.shopIds],
        startDate: this.startDate,
        endDate: this.endDate
      }).then(res => {
        if (res.status === 200) {
          if (this.selectDateType === 'month') {
            blobToXls(res.data, `进场费收入明细表(${this.startDate.substring(0, 7)})`)
          } else if (this.selectDateType === 'date') {
            blobToXls(res.data, `进场费收入明细表(${this.startDate.substring(0, 10)})`)
          } else {
            blobToXls(res.data, `进场费收入明细表(${this.startDate.substring(0, 4)})`)
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    rowKey (row) { // 显示row
    // console.log('row.id',row.shopName, row.id)
      return row.id
    },
    getSlottingFeeList () {
      this.isloading = true
      this.tableHeight = 0
      slottingFeeList({
        merchantId: this.$store.state.user.merchantId,
        shopIds: [this.searchObj2.shopIds],
        startDate: this.startDate,
        endDate: this.endDate,
        offset: (this.searchObj2.offset - 1) * this.searchObj2.limit,
        limit: this.searchObj2.limit
      }).then(res => {
        if (res.data.status === 200) {
          this.isloading = false
          if (res.data.data && res.data.data.length > 10) {
            this.tableHeight2 = 650
          }
          this.total2 = res.data.totalCount
          this.data2 = res.data.data ? res.data.data : []
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    handlePageSize2 (num) {
      this.searchObj2.limit = num
      this.getSlottingFeeList()
    },
    handlePage2 (val) {
      this.searchObj2.offset = val
      this.getSlottingFeeList()
    },
    clickHandler (obj) {
      this.searchObj2.shopIds = obj.shopId
      this.searchObj2.shopName = obj.shopName
      this.searchObj2.offset = 1
      this.searchObj2.limit = 10
      this.value3 = true
      this.getSlottingFeeList()
    },
    async handleShop () {
      const ids = await this.$refs.vueTreeselectChoice.getShopId()
      this.searchObj.shopId = ids
      this.search()
    },
    apiFinish () {
      // this.ShopValue = null
      this.treeselectoptions = this.$refs.vueTreeselectChoice.treeselectoptions
    },
    tableHeaderRowClassName () {
      return 'gray-header'
    },
    tableRowClassName ({ row }) {
      if (row.hasChildren) return row.id
    },
    load (tree, treeNode, resolve) {
      // console.log(tree)
      // console.log('treeNode', treeNode)
      // console.log('resolve', resolve)
      resolve(tree.childList)
      this.$nextTick(() => {
        let classNames = tree.childList.filter(item => item.hasChildren).map(item => item.id)
        classNames.forEach(className => {
          ((className) => {
            if (document.getElementsByClassName(className)) {
              document
                .getElementsByClassName(className)[0]
                .getElementsByClassName('el-table__expand-icon')[0]
                .click()
            }
          })(className)
        })
      })
    },
    async getList () {
      this.loading = true
      this.tableHeight = 0
      this.resData = []
      const res = await revenueDaily({
        merchantId: this.$store.state.user.merchantId,
        // shopIds: this.searchObj.shopId,
        shopIds: this.ShopValue,
        startDate: this.startDate,
        endDate: this.endDate
      })
      if (res.data.status !== 200) return this.$Message.error(`${res.data.error}`)
      let resData = res.data.data || []
      // var _ = require('lodash')
      // console.log('lodash', _)
      if (!resData.length) {
        this.loading = false
        return null
      }
      let keys = []
      this.columns.map(item => {
        item.children &&
          item.children.map(item => {
            if (item.key) keys.push(item.key)
            item.children &&
              item.children.map(item => {
                if (item.key) keys.push(item.key)
              })
          })
        if (item.key) keys.push(item.key)
      })
      // this.treeselectoptions.forEach(item => {

      // })

      // this.total = res.data.totalCount
      // if (res.data.data && res.data.data.length >= 14) {
      //   this.tableHeight = 520
      // }

      const table = arr => {
        return arr.map((item, index) => {
          if (!item.shopName) item.shopName = item.orgName
          item.childList = table(item.childList.filter(ele => !!ele))
          if (item.orgType === 1) {
            let newarr = resData
              .filter(list => list.shopId === item.id)
              .map(list => {
                if (!list.id) {
                  list.id = list.shopId
                }
                return list
              })
            if (newarr.length) {
              Object.assign(item, ...newarr)
              keys.forEach(key => {
                if (key === 'shopName') return null
                item[key] = Number(item[key] && item[key].replace(/,/g, '')) || 0
              })
            } else {
              // debugger
              // arr.splice(index, 1)
              item = null
            }
          } else if (item.orgType !== 1 && item) {
            item.childList = item.childList.filter(ele => !!ele)
            if (item.childList && item.childList.length) {
              if (item.childList.length) item.hasChildren = true
              keys.forEach(key => {
                if (key === 'shopName') return null
                item[key] = item.childList.reduce((prev, curr) => {
                  const value = Number(curr[key])
                  if (!isNaN(value)) {
                    return new Decimal(prev).add(value).valueOf()
                  } else {
                    return prev
                  }
                }, 0)
              })
            } else {
              // arr.splice(index, 1)
              item = null
            }
          }
          return item
        })
      }
      let temObj = cloneObj(this.treeselectoptions)
      // console.log(table(temObj))
      // 延时器：解决接口返回太快table数据不更新
      setTimeout(() => {
        this.resData = table(temObj)
        this.$nextTick(() => {
          if (document.getElementsByClassName('el-table__row--level-0')[0]) {
            document
              .getElementsByClassName('el-table__row--level-0')[0]
              .getElementsByClassName('el-table__expand-icon')[0]
              .click()
          }
          this.loading = false
        })
      }, 200)

      // console.log(resData)
      // console.log(this.resData)

      // console.log(this.resData)
    },

    filtersResData (data) {
      data.map(ele => {
        Object.keys(ele).forEach(key => {
          if (key !== 'shopName' && key !== 'shopId') {
            ele[key] = ele[key] ? ele[key] : '0.00'
          }
        })
      })
      return data
    },
    DropdownItemn (val) {
      if (!dayjs(this.startDate).isValid()) {
        this.$Message.error(`请选择时间`)
      } else if (!this.searchObj.shopId.length) {
        this.$Message.error(`请选择门店列表`)
      } else {
        let dateType = this.selectDateType === 'month' ? '1' : this.selectDateType === 'year' ? '2' : '0'
        let taskModule = val === '2' ? 'storeRevenueDetail' : 'storeRevenueSummary'
        this.$refs.downCenterRef.addTask({
          merchantId: this.$store.state.user.merchantId,
          shopIds: this.ShopValue,
          startDate: this.startDate,
          endDate: this.endDate,
          dateType: dateType,
          taskModule: taskModule
        })

        // if (val === '2') {
        //   if (this.selectDateType === 'month') {
        //     revenueDailyDetailExport({
        //       merchantId: this.$store.state.user.merchantId,
        //       // shopIds: this.searchObj.shopId,
        //       shopIds: this.searchObj.shopId,
        //       startDate: this.startDate,
        //       endDate: this.endDate,
        //       dateType: '1'
        //     }).then(res => {
        //       if (res.status === 200) {
        //         blobToXls(res.data, `店面营收明细统计表(${this.startDate.substring(0, 7)})`)
        //       } else {
        //         this.$Message.error(`${res.error}`)
        //       }
        //     })
        //   } else if (this.selectDateType === 'year') {
        //     revenueDailyDetailExport({
        //       merchantId: this.$store.state.user.merchantId,
        //       // shopIds: this.searchObj.shopId,
        //       shopIds: this.searchObj.shopId,
        //       startDate: this.startDate,
        //       endDate: this.endDate,
        //       dateType: '2'
        //     }).then(res => {
        //       if (res.status === 200) {
        //         blobToXls(res.data, `店面营收明细统计表(${this.startDate.substring(0, 4)})`)
        //       } else {
        //         this.$Message.error(`${res.error}`)
        //       }
        //     })
        //   } else {
        //     revenueDailyDetailExport({
        //       merchantId: this.$store.state.user.merchantId,
        //       // shopIds: this.searchObj.shopId,
        //       shopIds: this.searchObj.shopId,
        //       startDate: this.startDate,
        //       endDate: this.endDate,
        //       dateType: '0'
        //     }).then(res => {
        //       if (res.status === 200) {
        //         blobToXls(res.data, `店面营收明细统计表(${this.startDate.substring(0, 10)})`)
        //       } else {
        //         this.$Message.error(`${res.error}`)
        //       }
        //     })
        //   }
        // } else {
        //   if (this.selectDateType === 'month') {
        //     revenueDailyExport({
        //       merchantId: this.$store.state.user.merchantId,
        //       // shopIds: this.searchObj.shopId,
        //       shopIds: this.searchObj.shopId,
        //       startDate: this.startDate,
        //       endDate: this.endDate
        //     }).then(res => {
        //       if (res.status === 200) {
        //         blobToXls(res.data, `店面营收统计表(${this.startDate.substring(0, 7)})`)
        //       } else {
        //         this.$Message.error(`${res.error}`)
        //       }
        //     })
        //   } else if (this.selectDateType === 'year') {
        //     revenueDailyExport({
        //       merchantId: this.$store.state.user.merchantId,
        //       // shopIds: this.searchObj.shopId,
        //       shopIds: this.searchObj.shopId,
        //       startDate: this.startDate,
        //       endDate: this.endDate
        //     }).then(res => {
        //       if (res.status === 200) {
        //         blobToXls(res.data, `店面营收统计表(${this.startDate.substring(0, 4)})`)
        //       } else {
        //         this.$Message.error(`${res.error}`)
        //       }
        //     })
        //   } else {
        //     revenueDailyExport({
        //       merchantId: this.$store.state.user.merchantId,
        //       // shopIds: this.searchObj.shopId,
        //       shopIds: this.searchObj.shopId,
        //       startDate: this.startDate,
        //       endDate: this.endDate
        //     }).then(res => {
        //       if (res.status === 200) {
        //         blobToXls(res.data, `店面营收统计表(${this.startDate.substring(0, 10)})`)
        //       } else {
        //         this.$Message.error(`${res.error}`)
        //       }
        //     })
        //   }
        // }
      }
    },
    // 获取页码
    handlePage (val) {
      this.searchObj.offset = val
      this.getList()
    },
    handlePageSize (pageSize) {
      this.searchObj.limit = pageSize
      this.getList()
    },
    search () {
      if (!dayjs(this.startDate).isValid()) {
        this.$Message.error(`请选择时间`)
      } else if (!this.searchObj.shopId.length) {
        this.$Message.error(`请选择门店列表`)
      } else {
        this.searchObj.offset = 1
        this.searchObj.limit = 10
        this.getList()
      }
    }
  }
}
</script>
<style lang="less">
.ivu-table-tip {
  span {
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
  }
}
#receivables-des {
  position: absolute;
  width: 100%;
}
#receivables-des .export_receivable .ivu-select-dropdown {
  left: 3px !important;
}
.slotting-fee {
  .ivu-drawer-close {
    right: 24px;
    top: 19px;
  }
  .ivu-drawer-header {
    padding: 24px;
  }
  .table-list {
    // border-top: 1px solid #e8eaec !important;
    border-left: 1px solid #e8eaec !important;
  }
  .demo-drawer-footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    // border-top: 1px solid #e8e8e8;
    padding: 16px 24px;
    text-align: right;
    background: #fff;
  }
}
#receivables-des {
  .gray-header {
    background-color: #f8f8f9;
    height: 40px;
    padding: 6px 0;
    font-weight: bold;
    color: #515a6e;
  }
}
</style>
